<template>
	<view class="convert p-20">
		<u-navbar title="轻松兑换" bgColor="#f7f7f7" safeAreaInsetTop :placeholder="true" leftIconColor="#000000"
			@leftClick="back" titleStyle="{fontSize: 16px;font-weight: bold;color: #000000;}">
			<view class="u-nav-slot f-base bold" slot="right" @click="toConvert">兑换码兑换</view>
		</u-navbar>
		<template v-if="!loading">
			<view class="my-goods flex-no-horizontal m-b-20">
				<view class="goods f-xxs">
					<u--image src="../../static/img/convert-stone-icon.png" width="15" height="15" class="m-r-5">
					</u--image>
					<text>元石：{{user.stone}}</text>
				</view>
				<view class="goods f-xxs">
					<u--image src="../../static/img/convert-vigor-icon.png" width="15" height="15" class="m-r-5">
					</u--image>
					<text>元气：{{user.vigor}}</text>
				</view>
				<view class="goods f-xxs">
					<u--image src="../../static/img/convert-seed-icon.png" width="15" height="15" class="m-r-5">
					</u--image>
					<text>种子：{{user.seed}}</text>
				</view>
			</view>
			<view class="list flex-no-horizontal" v-if="list.length">
				<view class="list-item m-b-15" v-for="item in list" :key="item.id">
					<u--image :src="item.image" width="100%" height="160"></u--image>
					<view class="des flex-no-horizontal">
						<view class="f-xs">
							<view class="m-b-5">{{item.name}}</view>
							<view v-if="item.store < user.stone">{{item.store}}元石</view>
							<view v-else class="red">{{item.store}}元石</view>
						</view>
						<view class="btn text-center" @click="convertGoods(item.id)" v-if="item.store <= user.stone">兑换
						</view>
						<view class="btn text-center disabled" v-else>兑换</view>
					</view>
				</view>
				<view class="list-item m-b-15">
					<u--image src="../../static/img/convert-symbol.png" width="100%" height="160"></u--image>
					<view class="des flex-no-horizontal">
						<view class="f-xs">
							<view class="m-b-5">转赠符</view>
							<view class="red">1艾草种子</view>
						</view>
						<view class="btn text-center" @click="isConvertSymbol = true">兑换</view>
					</view>
				</view>
			</view>
			<u-empty v-else></u-empty>
		</template>
		<u-overlay :show="isConvertBox" @click="isConvertBox = false">
			<view class="warp">
				<view class="rect border-box" @tap.stop>
					<view class="text-center f-xl m-b-20">兑换盲盒</view>
					<view class="f-base m-b-20 text-center">确认兑换盲盒吗？</view>
					<view class="btn-group flex-no-horizontal f-base">
						<view class="cancel text-center" @click="isConvertBox= false">取消</view>
						<view class="confirm text-center" @click="convert">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
		<u-overlay :show="isConvertSymbol" @click="isConvertSymbol = false">
			<view class="warp">
				<view class="rect border-box" @tap.stop>
					<view class="text-center f-xl m-b-20">兑换转赠符</view>
					<view class="f-base m-b-10 text-center">是否消耗种子*1兑换转赠符*1？</view>
					<view class="f-base text-center m-b-20" style="color: #808080;"> 拥有种子数：{{user.seed}} </view>
					<view class="btn-group flex-no-horizontal f-base">
						<view class="cancel text-center" @click="isConvertSymbol = false">取消</view>
						<view class="confirm text-center" @click="convertSymbol">确定</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		convertList,
		convertApi,
		convertSymbolApi
	} from '../../api/collection.js'
	export default {
		data() {
			return {
				isConvertBox: false,
				isConvertSymbol: false,
				list: [],
				goodsId: 0,
				loading: true
			}
		},
		computed: {
			...mapState({
				user: state => state.userInfo
			})
		},
		onLoad() {
			this.getGoodsList()
		},
		methods: {
			async getGoodsList() {
				this.loading = true
				uni.showLoading({
					title: '加载中...'
				})
				try {
					const res = await convertList()
					this.list = res.data.mall
					uni.hideLoading()
					this.loading = false
				} catch (e) {
					console.log(e)
					uni.hideLoading()
					this.loading = false
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			convertGoods(id) {
				this.goodsId = id
				this.isConvertBox = true
			},
			async convert(id) {
				this.isConvertBox = false
				try {
					const res = await convertApi({
						mall_id: this.goodsId
					})
					uni.showToast({
						title: res.data.info,
						icon: 'none'
					})
					this.$store.dispatch('getUserInfo')
				} catch (e) {
					console.log(e)
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			async convertSymbol() {
				try {
					const res = await convertSymbolApi()
					uni.showToast({
						title: res.data.info,
						icon: 'none'
					})
					this.isConvertSymbol = false
					this.$store.dispatch('getUserInfo')
				} catch (e) {
					console.log(e)
					this.isConvertSymbol = false
					uni.showToast({
						title: e.data || e.message,
						icon: 'none'
					})
				}
			},
			convertBox() {
				this.isConvertBox = false
			},
			back() {
				uni.navigateBack()
			},
			toConvert() {
				uni.navigateTo({
					url: '../user/convertCollection'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.convert {
		min-height: 100%;
		background-color: #f7f7f7;

		.red {
			color: #c30808;
		}

		.my-goods {
			justify-content: space-between;

			.goods {
				padding: 10rpx 20rpx;
				background: linear-gradient(90deg, #e4e9f2, #e5e7f0);
				border: 1px solid #ffffff;
				text-align: center;
				display: flex;
				border-radius: 30rpx;
			}
		}

		.list {
			justify-content: space-between;
			flex-wrap: wrap;

			.list-item {
				width: 47%;
				background: #FFFFFF;
				border-radius: 14rpx;
				overflow: hidden;

				.des {
					padding: 24rpx 30rpx;
					justify-content: space-between;

					.btn {
						background: #000000;
						border-radius: 40rpx;
						font-size: 15px;
						color: white;
						padding: 10rpx 20rpx;
					}

					.disabled {
						background: #A2A2A2;
					}
				}
			}
		}

		.warp {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;

			.rect {
				width: 85%;
				background-color: #fff;
				border-radius: 20rpx;
				padding: 60rpx;

				.btn-group {
					justify-content: space-between;

					.cancel {
						width: 44%;
						padding: 15rpx 0;
						border-radius: 40rpx;
						border: 1px solid #000000;
					}

					.confirm {
						border: 1px solid #000000;
						background-color: #000000;
						width: 44%;
						padding: 15rpx 0;
						border-radius: 40rpx;
						color: white;
					}
				}
			}
		}
	}
</style>
